<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet"
          href="{{ url_for('static', filename='plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <!-- 按需加载 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"></script>

    {% block head %}
    {% endblock %}
    <title>{% block title %}{% endblock %}</title>
    <style>
        body {
            min-height: 100vh; /* 让body至少占满整个视口高度 */
            display: flex;
            flex-direction: column;
            background-color: #ffffff;
        }

    </style>
    <link rel="stylesheet"
          href="{{ url_for('static', filename='plugins/bootstrap-4.6.2-dist/css/bootstrap.min.css') }}">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">网络暴力监测系统</a>
    <a href="/alert">预警中心</a> &nbsp;&nbsp;
    <a href="/analysis">数据分析</a> &nbsp;&nbsp;
{#    <a href="/analysis/rank">排行榜</a> &nbsp;&nbsp;#}
    <a href="/model_use">网暴语言测试</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

{#<div class="container" style="background-color: #ffffff;padding: 0;flex: 1;">#}
<!-- 页面主要内容 -->
{% block body %}
{% endblock %}
{#</div>#}


<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalCenterTitle"
     aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLongTitle">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要删除这个项目吗？此操作不可撤销。
            </div>
            <!-- 删除确认模态框 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <!-- 更新此处的按钮id -->
                <button type="button" class="btn btn-danger" id="confirmDeleteButton">删除</button>
            </div>
        </div>
    </div>
</div>

<!-- 通知模态框 -->
<div class="modal fade" id="noticeModal" tabindex="-1" role="dialog"
     aria-labelledby="noticeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="noticeModalLabel">通知</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="noticeMessage">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">好的</button>
            </div>
        </div>
    </div>
</div>

{#警报框#}
<div id="alterModel" aria-live="polite" aria-atomic="true" style="position: fixed; bottom: 0; right: 0;">
    <div class="toast" data-autohide="true" data-delay="5000">
        <div class="toast-header">
            <strong class="mr-auto">网暴风险警报</strong>
            <small>现在</small>
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="toast-body" id="alterMessage">
            <!-- 这里是toast通知的内容 -->
        </div>
    </div>
</div>


<script type="text/javascript" src="{{ url_for('static', filename='js/echarts-wordcloud.min.js') }}"></script>

<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
<script type="text/javascript"
        src="{{ url_for('static', filename='plugins/bootstrap-4.6.2-dist/js/bootstrap.min.js') }}"></script>
<script>
    $('#noticeModal').on('shown.bs.modal', function (e) {
        setTimeout(function () {
            $('#noticeModal').modal('hide');
            setTimeout(function () {
                location.reload(); // 刷新页面
            }, 1000); // 关闭弹窗后1秒刷新页面
        }, 2000); // 弹窗展示2秒后关闭
    });
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 连接到 Socket.IO 服务器
        const socket = io();
        // 在页面加载完成后执行的代码
        socket.on('alert', function (data) {
            // 将警报内容展示在模态框中
            const alertMessage = document.getElementById("alterMessage"); // 修改为对应的 ID
            const video_message = JSON.parse(data.message);
            // 清空警报信息的 HTML 内容
            alertMessage.innerHTML = '';
            // 构建警报信息的 HTML 字符串
            const messageContent = `
            <p>视频名称: ${video_message.video_name}</p>
            <p>发布时间: ${video_message.pubdate}</p>
            <p>播放量: ${video_message.views} &nbsp;&nbsp; 分享数: ${video_message.share}</p>
            <p>评论数: ${video_message.comment_count} &nbsp;&nbsp; 评论涉暴数: ${video_message.violence_count}</p>
            <p>最后评论时间: ${video_message.last_comment_time}</p>
            <a href="/alert_detail/${video_message.bvid}" target="_blank">查看详情</a>
        `;
            // 使用 insertAdjacentHTML 将 HTML 内容插入到 #alterMessage 中
            alertMessage.insertAdjacentHTML('beforeend', messageContent);
            // 显示警告
            $('.toast').toast('show');
        });
    });


</script>
{% block js %}{% endblock %}
</body>
</html>